<template>
  <el-dialog
    ref="userDialog"
    v-dialogdrag
    custom-class="wf-dialog"
    :visible.sync="visible"
    title="用户选择"
    width="850px"
    :before-close="handleClose"
    append-to-body
    destroy-on-close
  >
    <div class="selectContent">
      <div class="deptContent">
        <div class="deptTitle" style="height: 40px; line-height: 40px">
          部门列表({{ treeData.length }})
        </div>
        <el-input
          size="small"
          class="searchTree"
          style="box-sizing: border-box; padding: 15px"
          placeholder="请输入内容……"
          v-model="filterText"
        ></el-input>
        <div class="treeListWrap">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
            node-key="pid"
            ref="tree"
          ></el-tree>
        </div>
      </div>
      <div class="userContent">
        <el-transfer
          filterable
          :filter-method="filterMethod"
          filter-placeholder="请输入城市拼音"
          v-model="selectedListId"
          :titles="topTitle"
          :data="userList"
          :props="transferProps"
        >
          <span slot-scope="{ option }"
            >{{ option.name }}({{ option.orgName }})
          </span>
        </el-transfer>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="mini">取 消</el-button>
      <el-button type="primary" @click="handleConfirm" size="mini"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import * as api from "@/api/userManage/index";
import * as appApi from "@/api/application/index";

export default {
  name: "selectDeptUser",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    appInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      filterText: "",
      userList: [],
      selectedList: [],
      selectedListId: [],
      treeData: [],
      topTitle: ["用户", "分配用户"],
      page: {
        pageSize: 1000,
        currentPage: 1,
        total: 0,
      },
      defaultProps: {
        children: "children",
        label: "nameCn",
      },
      transferProps: {
        key: "pid",
        label: "name",
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    visible(val) {
      if (val) {
        this.getUserTree();
        this.getAppUserList();
      }
    },
  },
  methods: {
    getAppUserList() {
      appApi.getAppUserList({ applicationId: this.appInfo.oid }).then((res) => {
        if (res.data.data && res.data.data.length > 0) {
          this.selectedListId = res.data.data.map((v) => v.pid);
          this.selectedList = res.data.data;
        }else{
          this.selectedListId =[];
          this.selectedList = [];
        }
      });
    },
    getUserTree() {
      api.getUserTree().then((res) => {
        let data = res.data.data;
        this.treeData = data;
        this.deptId = data[0].pid;
        this.topTitle = [`${data[0].nameCn}部门`, "分配用户"];
        this.getList();
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(data[0].pid);
        });
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getList() {
      api
        .getUserListData({
          orgId: this.deptId,
        })
        .then((res) => {
          const resData = res.data.data || [];
          const userIds = resData.map((v) => v.pid);
          if (this.selectedList.length > 0) {
            const mainData = this.selectedList.filter(
              (v) => userIds.indexOf(v.pid) < 0
            );
            this.userList = [...resData, ...mainData];
          } else {
            this.userList = [...resData];
          }
        });
    },
    handleNodeClick(data) {
      this.deptId = data.pid;
      this.topTitle = [`${data.nameCn}部门`, "分配用户"];
      this.getList();
    },
    handleConfirm() {
      const params = {
        userIds: this.selectedListId.join(","),
        applicationId: this.appInfo.oid,
      };
      appApi.allocateUser(params).then((res) => {
        if (res.data.success) {
          this.$message.success("分配用户成功！");
        } else {
          this.$message.error("分配用户失败！");
        }
        this.$emit("update:visible", false);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.selectContent {
  display: flex;
  flex-direction: row;
  padding: 20px;
  .deptContent {
    flex: 1;
    min-width: 200px;
    margin-right: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;

    .deptTitle {
      background: #f5f7fa;
      margin: 0;
      padding-left: 15px;
      border-bottom: 1px solid #ebeef5;
    }
    .searchTree {
      box-sizing: border-box;
      ::v-deep .el-input__inner {
        border-radius: 16px;
      }
    }
    .treeListWrap {
      height: 400px;
      overflow-y: scroll;
    }
  }
  .userContent {
    ::v-deep .el-transfer {
      height: auto;

      .el-transfer-panel__body {
        height: auto;
        .el-transfer-panel__list,
        .el-transfer-panel__empty {
          height: 400px !important;
        }
      }
      .el-transfer__buttons {
        padding: 0 20px;
      }
    }
  }
}
</style>